<template>
    <view class="custom-nav-bar" :style="navBarStyle">
      <!-- 状态栏占位区域，自动适应不同机型 -->
      <view class="status-bar" :style="{height: statusBarHeight + 'px'}"></view>
      
      <!-- 导航栏内容区域 -->
      <view class="nav-content">
        <!-- 左侧区域：默认为返回按钮，可通过插槽自定义 -->
        <view class="nav-left">
          <slot name="left">
            <view class="back-icon" @tap="handleBack" v-if="showBack">
              <text class="gui-icons gui-block gui-text gui-color-white">&#xe600;</text>
            </view>
          </slot>
        </view>
        
        <!-- 中间标题区域：可通过插槽自定义 -->
        <view class="nav-title">
          <slot name="title">
            <text class="title-text" :style="{color: titleColor}">{{ title }}</text>
          </slot>
        </view>
        
        <!-- 右侧区域：通过插槽自定义 -->
        <view class="nav-right">
          <slot name="right"></slot>
        </view>
      </view>
    </view>
    
    <!-- 导航栏占位，防止内容被遮挡 -->
    <view class="nav-placeholder" :style="{height: navBarHeight + 'px'}"></view>
  </template>
  
  <script>
  export default {
    name: 'CustomHeader',
    props: {
      // 标题文本
      title: {
        type: String,
        default: '页面标题'
      },
      // 背景颜色
      backgroundColor: {
        type: String,
        default: '#1989fa'
      },
      // 背景渐变色
      backgroundGradient: {
        type: String,
        default: ''
      },
      // 标题颜色
      titleColor: {
        type: String,
        default: '#ffffff'
      },
      // 是否显示返回按钮
      showBack: {
        type: Boolean,
        default: true
      },
      // 自定义返回事件
      customBack: {
        type: Function,
        default: null
      },
      // 是否固定在顶部
      fixed: {
        type: Boolean,
        default: true
      },
      // 导航栏内容高度(不包括状态栏)
      contentHeight: {
        type: Number,
        default: 44
      }
    },
    data() {
      return {
        statusBarHeight: 20, // 状态栏高度，默认值会被覆盖
      };
    },
    computed: {
      // 计算导航栏样式
      navBarStyle() {
        const style = {
          backgroundColor: this.backgroundColor,
          position: this.fixed ? 'fixed' : 'relative',
        };
        
        // 如果传入了渐变背景，优先使用渐变
        if (this.backgroundGradient) {
          style.backgroundImage = this.backgroundGradient;
        }
        
        return style;
      },
      // 计算导航栏总高度(状态栏+内容区)
      navBarHeight() {
        return this.statusBarHeight + this.contentHeight;
      }
    },
    created() {
      // 获取系统信息，设置状态栏高度
      const systemInfo = getApp().globalData.systemInfo;
      this.statusBarHeight = systemInfo.statusBarHeight || 20;
    },
    methods: {
      // 处理返回事件
      handleBack() {
        if (this.customBack && typeof this.customBack === 'function') {
          this.customBack();
        } else {
          uni.navigateBack({
            delta: 1,
            fail: () => {
              uni.switchTab({
                url: '/pages/index/index'
              });
            }
          });
        }
      }
    }
  }
  </script>
  
  <style scoped>
  .gui-text{
    font-size: 40rpx;
  }
  .custom-nav-bar {
    width: 100%;
    z-index: 999;
    left: 0;
    top: 0;
    right: 0;
  }
  
  .nav-content {
    display: flex;
    align-items: center;
    height: 44px; /* 默认高度，会被props覆盖 */
    padding: 0 12px;
    position: relative;
  }
  
  .nav-left {
    flex: 1;
    display: flex;
    align-items: center;
  }
  
  .nav-title {
    flex: 2;
    text-align: center;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  
  .nav-right {
    flex: 1;
    display: flex;
    justify-content: flex-end;
    align-items: center;
  }
  
  .back-icon {
    width: 40px;
    height: 44px;
    display: flex;
    align-items: center;
  }
  
  .icon {
    font-family: "uniicons";
    font-size: 22px;
    color: #ffffff;
  }
  
  .title-text {
    font-size: 16px;
    font-weight: 500;
    line-height: 44px;
  }
  
  /* 确保内容不被导航栏遮挡 */
  .nav-placeholder {
    width: 100%;
  }
  </style>